<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿世纪佳缘的登录用户名</title>
    <!-- https://www.jiayuan.com/ -->
    <style>
        input {
            outline: none;
        }
        
        .input_text {
            width: 120px;
            height: 23px;
            padding: 0 4px 0 10px;
            border: 1px #d9d9d9 solid;
            color: #aaa;
            float: left;
            margin: 0 0 0 8px;
            font: 12px/1.5 tahoma, arial, \5b8b\4f53;
        }
        
        .input_focus {
            border: 1px #ffd6db solid;
            color: #888;
        }
        
        .input_text_focus {
            border: 1px #ffd6db solid;
            color: #888;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" class="input_text" value="邮箱/ID/手机号">
        <input type="password" class="input_text">
    </div>
    <script>
        // 1.获取元素
        var ipt = document.querySelectorAll('.input_text');
        // console.log(ipt[0]);
        // 2.注册事件 (文本框)
        ipt[0].onfocus = function() {
            // ipt.value = '';
            // ipt.className = 'input_text input_focus';
            if (this.value === '邮箱/ID/手机号') {
                this.value = '';
            }
            this.className = 'input_text input_focus';

        }
        ipt[0].onblur = function() {
            // ipt.value = '';
            // ipt.className = 'input_text input_focus';
            if (this.value === '') {
                this.value = '邮箱/ID/手机号';
            }
            this.className = 'input_text';
        }

        // 注册事件（密码框）
        ipt[1].onfocus = function() {
            this.className = 'input_text input_text_focus';

        }
        ipt[1].onblur = function() {
            this.className = 'input_text';
        }
    </script>
</body>

</html>